<template>
  <div class="sidebar-container">
    <el-menu
      :default-active="activeMenu"
      :collapse="collapse"
      :unique-opened="true"
      class="sidebar-menu"
      router
    >
      <!-- 普通用户首页菜单 -->
      <el-menu-item v-if="!isAdmin" index="/home/rest">
        <el-icon><House /></el-icon>
        <template #title>首页</template>
      </el-menu-item>

      <!-- 管理员专用菜单 -->
      <template v-if="isAdmin">
        <el-sub-menu index="admin">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统管理</span>
          </template>

          <el-menu-item index="/home/alluser" v-admin>
            <el-icon><User /></el-icon>
            <template #title>用户管理</template>
          </el-menu-item>

          <el-menu-item index="/home/manage" v-admin>
            <el-icon><Shop /></el-icon>
            <template #title>商户管理</template>
          </el-menu-item>

          <el-menu-item index="/home/allgoods" v-admin>
            <el-icon><List /></el-icon>
            <template #title>订单管理</template>
          </el-menu-item>

          <el-menu-item index="/home/recharge-audit" v-admin>
            <el-icon><CreditCard /></el-icon>
            <template #title>充值审核</template>
          </el-menu-item>
        </el-sub-menu>
      </template>

      <!-- 普通用户菜单 -->
      <template v-if="!isAdmin">
        <el-menu-item index="/home/money">
          <el-icon><CreditCard /></el-icon>
          <template #title>充值</template>
        </el-menu-item>

        <el-menu-item index="/home/cart">
          <el-icon><ShoppingCart /></el-icon>
          <template #title>购物车</template>
        </el-menu-item>

        <el-menu-item index="/home/order">
          <el-icon><Document /></el-icon>
          <template #title>我的订单</template>
        </el-menu-item>

        <!-- 营销功能 -->
        <el-sub-menu index="marketing">
          <template #title>
            <el-icon><Present /></el-icon>
            <span>营销中心</span>
          </template>

          <el-menu-item index="/home/coupons">
            <el-icon><Discount /></el-icon>
            <template #title>优惠券</template>
          </el-menu-item>

          <el-menu-item index="/home/points">
            <el-icon><Star /></el-icon>
            <template #title>积分中心</template>
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item index="/home/user">
          <el-icon><Avatar /></el-icon>
          <template #title>个人中心</template>
        </el-menu-item>

        <el-menu-item index="/home/history">
          <el-icon><Clock /></el-icon>
          <template #title>历史记录</template>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import {
  House,
  Setting,
  User,
  Shop,
  List,
  CreditCard,
  ShoppingCart,
  Document,
  Avatar,
  Clock,
  Present,
  Discount,
  Star
} from '@element-plus/icons-vue'
import { getCurrentUser, isAdmin as checkIsAdmin } from '@/utils/auth'

// Props
const props = defineProps({
  collapse: {
    type: Boolean,
    default: false
  }
})

// Emits
const emit = defineEmits(['toggle-collapse'])

const route = useRoute()
const userInfo = ref({})
const isAdmin = ref(false)

// 当前激活的菜单项
const activeMenu = computed(() => {
  return route.path
})

// 获取用户信息
const getUserInfo = () => {
  const user = getCurrentUser()
  if (user) {
    userInfo.value = user
    isAdmin.value = checkIsAdmin()
  }
}

// 组件挂载时获取用户信息
onMounted(() => {
  getUserInfo()
})
</script>

<style lang="less" scoped>
.sidebar-container {
  height: 100%;
  background: #fff;
}

.sidebar-menu {
  height: 100%;
  border-right: none;

  :deep(.el-menu-item) {
    height: 50px;
    line-height: 50px;

    &:hover {
      background-color: #ecf5ff;
      color: #409eff;
    }

    &.is-active {
      background-color: #409eff;
      color: #fff;

      .el-icon {
        color: #fff;
      }
    }
  }

  :deep(.el-sub-menu) {
    .el-sub-menu__title {
      height: 50px;
      line-height: 50px;

      &:hover {
        background-color: #ecf5ff;
        color: #409eff;
      }
    }

    .el-menu-item {
      padding-left: 50px !important;

      &:hover {
        background-color: #f0f9ff;
      }

      &.is-active {
        background-color: #409eff;
        color: #fff;
      }
    }
  }

  :deep(.el-icon) {
    margin-right: 8px;
    font-size: 16px;
  }

  // 折叠状态样式
  &.el-menu--collapse {
    :deep(.el-sub-menu__title) {
      padding: 0 20px;
    }

    :deep(.el-menu-item) {
      padding: 0 20px;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .sidebar-container {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    transition: transform 0.3s ease;

    &.collapsed {
      transform: translateX(-100%);
    }
  }
}
</style>
